<script>
export default {
	props: {
		name: {
			type: String,
			default: '',
		},
	},
	name: 'Icon',
	computed: {
		isIconfont() {
			return /^icon-.*$/.test(this.name);
		},
	},
};
</script>
<template>
	<div class="icon">
		<svg aria-hidden="true" v-if="isIconfont">
			<use :xlink:href="`#${name}`"></use>
		</svg>
		<el-icon v-else v-bind="$attrs">
			<component :is="name"></component>
		</el-icon>
	</div>
</template>
<style lang="scss" scoped>
.icon {
	display: inline-block;
	svg {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
}
</style>
